<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>查看</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer addInsurePage">
      <el-tabs class="custom-tab" v-model="activeName">
        <el-tab-pane label="社保" name="shebao" v-show="data!=null">
          <!-- 社保表单 -->
          <div class="customform shebaoform">
            <el-form :inline="true"  label-width="120px" label-position="left">
              <div class="el-form--inline">
                <el-form-item label="参保地">
                  <div class="el-input form-control-static">{{data.addr.addrName}}</div>
                </el-form-item>
                <el-form-item label="所属城市">
                  <div class="el-input form-control-static">{{data.addr.provinceName+"/"+data.addr.cityName}}</div>
                </el-form-item>
                <el-form-item label="社保年度首页">
                  <div class="el-input form-control-static">{{data.social.areaFirstMonth}}月</div>
                </el-form-item>
              </div>
              <div class="el-form--inline">
                <el-form-item label="减员周期">
                  <div class="el-input form-control-static">{{data.social.zyTbCycleName}}</div>
                </el-form-item>
                <el-form-item label="增员周期">
                  <div class="el-input form-control-static">{{data.social.jyTbCycleName}}</div>
                </el-form-item>
                <el-form-item label="滞纳金比例">
                  <div class="el-input form-control-static">{{data.social.overdueFineRatio}}</div>
                </el-form-item>
              </div>
              <div class="el-form--inline">
                <el-form-item label="增员截止日期">
                  <div class="el-input form-control-static">{{data.social.zyEndDay}}日</div>
                </el-form-item>
                <el-form-item label="减员截止日期">
                  <div class="el-input form-control-static">{{data.social.jyEndDay}}日</div>
                </el-form-item>
                <el-form-item label="一月内多次增减">
                  <div class="el-input form-control-static">{{data.social.hasSecondTime == 1 ? '允许':'不允许'}}</div>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <!-- 社保表单结束 -->
        </el-tab-pane>
        <el-tab-pane label="公积金" name="gongjijin">
          <div class="customform shebaoform">
            <el-form :inline="true"  label-width="120px" label-position="left">
              <div class="el-form--inline">
                <el-form-item label="参保地">
                  <div class="el-input form-control-static">{{data.addr.addrName}}</div>
                </el-form-item>
                <el-form-item label="所属城市">
                  <div class="el-input form-control-static">{{data.addr.provinceName+"/"+data.addr.cityName}}</div>
                </el-form-item>
                <el-form-item label="社保年度首页">
                  <div class="el-input form-control-static">{{data.accfund.areaFirstMonth}}月</div>
                </el-form-item>
              </div>
              <div class="el-form--inline">
                <el-form-item label="减员周期">
                  <div class="el-input form-control-static">{{data.accfund.zyTbCycleName}}</div>
                </el-form-item>
                <el-form-item label="增员周期">
                  <div class="el-input form-control-static">{{data.accfund.jyTbCycleName}}</div>
                </el-form-item>
                <el-form-item label="滞纳金比例">
                  <div class="el-input form-control-static">{{data.accfund.overdueFineRatio}}</div>
                </el-form-item>
              </div>
              <div class="el-form--inline">
                <el-form-item label="增员截止日期">
                  <div class="el-input form-control-static">{{data.accfund.zyEndDay}}日</div>
                </el-form-item>
                <el-form-item label="减员截止日期">
                  <div class="el-input form-control-static">{{data.accfund.jyEndDay}}日</div>
                </el-form-item>
                <el-form-item label="一月内多次增减">
                  <div class="el-input form-control-static">{{data.accfund.hasSecondTime == 1 ? '允许':'不允许'}}</div>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 第二个tab模块 -->
    <div class="mainContainer m-t20">
      <el-tabs class="custom-tab" v-model="activeName2">
        <el-tab-pane label="增员资料" name="zyzl">
          <!-- 增员资料 -->
          <div class="zy-form my-table">
            <template>
              <el-table :data="tableData.zyData" style="width: 100%">
                <el-table-column align="center" type="index" ></el-table-column>
                <el-table-column align="center" prop="name" label="资料名称">
                  <template slot-scope="scope">
                    <span>{{ scope.row.nameValue}}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="contentType" label="资料类型" >
                  <template slot-scope="scope">
                    <span>{{ scope.row.contentTypeName }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="required" label="是否必要">
                  <template slot-scope="scope">
                    <span>{{ scope.row.required==1 ? '必要':'不必要' }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="comment" label="备注"></el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 增员资料结束 -->
        </el-tab-pane>
        <el-tab-pane label="减员资料" name="jyzl">
          <div class="zy-form my-table">
          <template>
            <el-table :data="tableData.jyData" style="width: 100%">
              <el-table-column align="center" type="index" ></el-table-column>
              <el-table-column align="center" prop="name" label="资料名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.nameValue}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="contentType" label="资料类型" >
                <template slot-scope="scope">
                  <span>{{ scope.row.contentTypeName }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="required" label="是否必要">
                <template slot-scope="scope">
                  <span>{{ scope.row.required==1 ? '必要':'不必要' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="comment" label="备注"></el-table-column>
            </el-table>
          </template>
          </div>
        </el-tab-pane>
        <el-tab-pane label="补缴资料" name="bjzl">
          <div class="zy-form my-table">
          <template>
            <el-table :data="tableData.bjData" style="width: 100%">
              <el-table-column align="center" type="index" ></el-table-column>
              <el-table-column align="center" prop="name" label="资料名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.nameValue}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="contentType" label="资料类型" >
                <template slot-scope="scope">
                  <span>{{ scope.row.contentTypeName }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="required" label="是否必要">
                <template slot-scope="scope">
                  <span>{{ scope.row.required==1 ? '必要':'不必要' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="comment" label="备注"></el-table-column>
            </el-table>
          </template>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 第二个tab模块结束 -->
    <div class="page-form-btn">
      <el-button @click="back">取消</el-button>
      <el-button type="primary" @click="edit">编辑</el-button>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  data() {
    return {
      datumType:{
        zyzl:"zyData",
        jyzl:"jyData",
        bjzl:"bjData"
      },
      id:null,
      activeName: "shebao",
      activeName2: "zyzl",
      // 社保表单
      data: {
        dataNums:[],
        //参保地基本信息
        addr:{
          provinceName:null,
          cityName:null,
          addrName:null,
        },
        //社保政策
        social:{
          overdueFineRatio:0,
          zyTbCycleCode:null,
          jyTbCycleCode:null,
          tjTbCycleCode:null,
          zyEndDay:null,
          jyEndDay:null,
          areaFirstMonth:1,
          isAllowAgainZjy:0,
          hasSecondTime:0,
          dataNum:{
            zyData:[],
            jyData:[],
            bjData:[]
          }
        },

        //公积金政策
        accfund:{
          overdueFineRatio:'',
          zyTbCycleCode:'',
          jyTbCycleCode:'',
          tjTbCycleCode:'',
          zyEndDay:'',
          jyEndDay:'',
          areaFirstMonth:null,
          isAllowAgainZjy:0,
          hasSecondTime:0,
          dataNum:{
            zyData:[],
            jyData:[],
            bjData:[]
          }
        }
      },
      tableData:{},
      // 增员资料
      datumList: {
        shebao:{
          zyData:[],
          jyData:[],
          bjData:[]
        },
        gongjijin: {
          zyData:[],
          jyData:[],
          bjData:[]
        }
      }
    };
  },
  created() {
    this.id = this.$route.query.id ;
    this.init();
  },
  watch:{
    activeName(val){
      this.tableChanged();
    },
    activeName2(val){
      this.tableChanged();
    }
  },
  methods: {
    tableChanged(){
      this.tableData = this.datumList[this.activeName] ;
      console.log(this.tableData)
      //this.tableData=this.datumList[this.activeName][this.activeName2];
      },
    init(){
      this.tableData =new Array();
      this.datumList = {
        shebao:{
          zyData:[],
          jyData:[],
          bjData:[]
        },
        gongjijin: {
          zyData:[],
          jyData:[],
          bjData:[]
        }
      };
      this.activeName = "shebao";
      this.activeName2="zyzl";
      Http.api.get("addr/"+this.id).then((res)=>{
        this.data=res.data;
        console.log(this.datumList)
        res.data.datumList.forEach((e)=>{
          if(e.policyType==0){
            switch (e.changeType) {
              case 0 : this.datumList.shebao.zyData.push(e);
                       break;
              case 1 : this.datumList.shebao.jyData.push(e);
                break;
              case 2 : this.datumList.shebao.bjData.push(e);
                break;
            }
          }else{
            switch (e.changeType) {
              case 0 : this.datumList.gongjijin.zyData.push(e);
                break;
              case 1 : this.datumList.gongjijin.jyData.push(e);
                break;
              case 2 : this.datumList.gongjijin.bjData.push(e);
                break;
            }
          }
        })
        this.tableData = this.datumList[this.activeName] ;
        console.log(this.datumList)
      })
    },
    edit() {
      this.$router.push({ path: "/policy/edit",query:{id:this.id} });
    },
    indexMethod(index) {
      return index + 1;
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
